<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="jumbotron jumbotron-fluid">
       <div class="container text-center">
          <h1 class="dispiay-4">JavaScript TODO</h1>
          <p class="lead">待办事项</p>
       </div>
	</div>
	<div class="container">
       <div class="row">
           <div class="col-12">
               <form class="mb-5" onsubmit="return false">
                    <div class="form-group">
                        <input type="text" class="form-control" id="ipt" placeholder="再次输入任务...">
                    </div>
                    <button type="submit" id="btn" class="btn btn-primary btn-block">添加</button>
               </form>
               <ul class="list-group" id="ul"></ul>
           </div> 	
       </div>
	</div>



	<script>
       let lists = ["学习 JavaScript","学习css3","学习html5"];


        function d() {
          document.querySelector("#ul").innerHTML = '';
        
       for (let i = 0; i < lists.length; i++) {
       	  let li = document.createElement('li');
       	  li.className = "list-group-item d-flex justify-content-between align-items-center";

       	  let span = document.createElement('span');
       	  let spanText = document.createTextNode(lists[i]);
       	  span.appendChild(spanText);
       	  //先把span设置为不可编辑状态
       	    span.setAttribute('contenteditable',false);
       	  //给span加双击事件
       	    span.addEventListener('ablclick',function(){
       	    	//span设置为可编辑状态
       	    	span.setAttribute('contenteditable',true);
       	    })
       	  //span加失去焦点事件
       	  span.addEventListener('blur',function(){
       	  	//span设置为不可编辑状态
       	  	span.setAttribute('contenteditable',false);
       	  })
       	  li.appendChild(span);

       	  let button = document.createElement('button');
       	  button.type = 'button';
       	  button.classList.add('close');
       	  button.innerHTML = '&times';
       	  //给button加事件
       	  button.addEventListener('click',function(){
       	  	console.log(i);
       	  	lists.splice(i,1)
       	    
       	    d()
       	  })

       	  li.appendChild(button);

       	  let ul = document.querySelector('#ul');
       	  ul.appendChild(li);
       }
       

       }
   
       // 默认先循环一边数组
       d()

       let btn = document.querySelector("#btn");
       btn.addEventListener('click',function(){
           let text = document.querySelector("#ipt");

           if (text.value !='') {
           	   lists.unshift(text.value)
           	   //追加完毕内容之后，把input的内容清空
           	   text.value = ''
           } else{
           	  alert("不可为空")
           }
           //执行for循环
           d()
       })




	</script>
</body>
</html>